<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="static/images/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="static/images/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
    <link rel="stylesheet" href="lib/bootstrap-icons/font/bootstrap-icons.css">
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/bootstrap-admin.min.css">
    <!--  代码高亮  -->
    <link rel="stylesheet" href="lib/prismjs/themes/prism-okaidia.css">
    <title>bootstrap-admin</title>
</head>
<body>


<!--侧边栏-->
<div class="bsa-sidebar">
    <div class="bsa-sidebar-header">
        <img src="static/images/logo-icon.png" class="bsa-logo-icon" alt="logo-icon">
        <div class="bsa-logo-text">bootstrap-admin</div>
    </div>
    <div class="bsa-sidebar-body">
        <ul class="bsa-menu">
            <li>
                <a href="index.html">
                    <i class="bi bi-house"></i>首页
                </a>
            </li>
            <li>
                <a href="javascript:" class="has-children open">
                    <i class="bi bi-columns-gap"></i>UI组件
                </a>
                <ul>
                    <li>
                        <a href="component-card.html">卡片</a>
                    </li>
                    <li>
                        <a href="component-button.html" class="active">按钮</a>
                    </li>
                    <li>
                        <a href="component-accordion.html">手风琴</a>
                    </li>
                    <li>
                        <a href="component-alert.html">警告框</a>
                    </li>
                    <li>
                        <a href="component-badge.html">徽章</a>
                    </li>
                    <li>
                        <a href="component-breadcrumb.html">面包屑</a>
                    </li>
                    <li>
                        <a href="component-table.html">表格</a>
                    </li>
                    <li>
                        <a href="javascript:" class="has-children">表单</a>
                        <ul>
                            <li><a href="component-form-elements.html">基础元素</a></li>
                            <li><a href="component-form-validations.html">表单验证</a></li>
                            <li><a href="component-form-layouts.html">表单布局</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-filetype-html"></i>页面
                </a>
                <ul>
                    <li>
                        <a href="page-profile.html">个人资料</a>
                    </li>
                    <li>
                        <a href="page-timeline.html">时间轴</a>
                    </li>
                    <li>
                        <a href="page-error.html">错误页面</a>
                    </li>
                    <li>
                        <a href="page-add.html">新增页面</a>
                    </li>
                    <li>
                        <a href="page-list.html">列表页</a>
                    </li>
                    <li>
                        <a href="page-blank.html">新页面</a>
                    </li>
                    <li>
                        <a href="page-login.html">登录页</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-filetype-js"></i>插件
                </a>
                <ul>
                    <li><a href="plugin-bootstrap-notify.html">通知插件</a></li>
                    <li><a href="plugin-bootstrap-dialog.html">弹层插件</a></li>
                    <li><a href="plugin-formvalidation.html">表单验证</a></li>
                    <li><a href="plugin-tempus-dominus.html">日期时间选择</a></li>
                    <li><a href="plugin-tinymce.html">富文本编辑器</a></li>
                    <li><a href="plugin-dropzone.html">文件上传</a></li>
                    <li><a href="plugin-croppie.html">头像裁剪</a></li>
                    <li><a href="plugin-ztree.html">树形组件</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-list-nested"></i>多级菜单
                </a>
                <ul>
                    <li><a href="javascript:">一级菜单</a></li>
                    <li>
                        <a href="javascript:" class="has-children">一级菜单</a>
                        <ul>
                            <li><a href="javascript:">二级菜单</a></li>
                            <li>
                                <a href="javascript:" class="has-children">二级菜单</a>
                                <ul>
                                    <li><a href="javascript:">三级菜单</a></li>
                                    <li>
                                        <a href="javascript:" class="has-children">三级菜单</a>
                                        <ul>
                                            <li><a href="javascript:">四级菜单</a></li>
                                            <li><a href="javascript:">四级菜单</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:" class="has-children">一级菜单</a>
                        <ul>
                            <li><a href="javascript:">二级菜单</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<!--头部导航-->
<div class="bsa-header">
    <div class="bsa-header-item bsa-mobile-sidebar-item">
        <i class="bi bi-list"></i>
    </div>
    <div class="bsa-header-item bsa-search-bar-item">
        <form class="bsa-search-box" action="#">
            <input type="text" class="form-control bsa-search-input" name="keyword" aria-label="搜索关键词"
                   placeholder="搜索关键词">
            <button class="bsa-search-btn" type="submit"><i class="bi bi-search"></i></button>
            <i class="bi bi-x bsa-search-close-icon"></i>
        </form>
    </div>
    <div class="bsa-header-item bsa-mobile-search-item">
        <i class="bi bi-search"></i>
    </div>
    <div class="bsa-header-item dropdown">
        <i class="bi bi-grid" data-bs-toggle="dropdown" role="button"></i>
        <div class="dropdown-menu dropdown-menu-end bsa-dropdown-menu">
            <div class="bsa-dropdown-menu-body">
                <div class="container-fluid">
                    <div class="row row-cols-3 g-3 p-3">
                        <a class="col text-center text-decoration-none" href="javascript:">
                            <div class="bsa-app-thumb mx-auto bg-primary text-white"><i class="bi bi-bank"></i></div>
                            <div class="fs-6 mt-1 text-muted">银行</div>
                        </a>
                        <a class="col text-center text-decoration-none" href="javascript:">
                            <div class="bsa-app-thumb mx-auto bg-info text-white"><i class="bi bi-link"></i></div>
                            <div class="fs-6 mt-1 text-muted">拓展应用2</div>
                        </a>
                        <a class="col text-center text-decoration-none" href="javascript:">
                            <div class="bsa-app-thumb mx-auto bg-danger text-white"><i class="bi bi-link"></i></div>
                            <div class="fs-6 mt-1 text-muted">拓展应用3</div>
                        </a>
                        <a class="col text-center text-decoration-none" href="javascript:">
                            <div class="bsa-app-thumb mx-auto bg-danger text-white"><i class="bi bi-link"></i></div>
                            <div class="fs-6 mt-1 text-muted">拓展应用4</div>
                        </a>
                        <a class="col text-center text-decoration-none" href="javascript:">
                            <div class="bsa-app-thumb mx-auto bg-danger text-white"><i class="bi bi-link"></i></div>
                            <div class="fs-6 mt-1 text-muted">拓展应用5</div>
                        </a>
                        <a class="col text-center text-decoration-none" href="javascript:">
                            <div class="bsa-app-thumb mx-auto bg-danger text-white"><i class="bi bi-link"></i></div>
                            <div class="fs-6 mt-1 text-muted">拓展应用6</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bsa-header-item dropdown">
        <div class="position-relative " data-bs-toggle="dropdown" role="button">
            <span class="bsa-num-count">99+</span>
            <i class="bi bi-bell"></i>
        </div>
        <div class="dropdown-menu dropdown-menu-end bsa-dropdown-menu">

            <div class="bsa-dropdown-menu-header d-flex align-items-center justify-content-between">
                <p class="bsa-dropdown-menu-title">通知列表</p>
                <a href="javascript:" class="bsa-dropdown-menu-all-read">全部设为已读</a>
            </div>

            <div class="bsa-dropdown-menu-body">
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb bg-danger text-white"><i class="bi bi-cart"></i></div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">新订单</h5>
                            <p class="bsa-media-text">您收到新的订单</p>
                            <p class="bsa-media-time small">10秒前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb bg-success text-white"><i class="bi bi-people"></i></div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">新增用户</h5>
                            <p class="bsa-media-text">100个新用户注册</p>
                            <p class="bsa-media-time small">30分钟前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb bg-warning text-white"><i class="bi bi-chat-square-dots"></i></div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">新的评论</h5>
                            <p class="bsa-media-text">您收到客户新的评论</p>
                            <p class="bsa-media-time small">2天前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb bg-primary text-white"><i class="bi bi-cart-check"></i></div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">订单已经发货</h5>
                            <p class="bsa-media-text">您的商品已在运送途中</p>
                            <p class="bsa-media-time small">3天前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb bg-secondary text-white"><i class="bi bi-person-workspace"></i>
                        </div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">新的同事</h5>
                            <p class="bsa-media-text">新增3位后台管理工作成员</p>
                            <p class="bsa-media-time small">1周前</p>
                        </div>
                    </div>
                </a>
            </div>

            <div class="bsa-dropdown-menu-footer d-flex align-items-center justify-content-center">
                <a href="javascript:" class="bsa-dropdown-view-all">查看所有通知</a>
            </div>

        </div>
    </div>
    <div class="bsa-header-item dropdown">
        <div class="position-relative " data-bs-toggle="dropdown" role="button">
            <span class="bsa-num-count">9</span>
            <i class="bi bi-chat-left"></i>
        </div>
        <div class="dropdown-menu dropdown-menu-end bsa-dropdown-menu">
            <div class="bsa-dropdown-menu-header d-flex align-items-center justify-content-between">
                <p class="bsa-dropdown-menu-title">消息列表</p>
                <a href="javascript:" class="bsa-dropdown-menu-all-read">全部设为已读</a>
            </div>
            <div class="bsa-dropdown-menu-body">
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb">
                            <img src="static/images/tx/1-14122G11110-50.jpg" class="bsa-media-thumb-img" alt="avatar">
                        </div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">青蛙王子</h5>
                            <p class="bsa-media-text">请给我开通新的角色权限~</p>
                            <p class="bsa-media-time small">16秒前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb">
                            <img src="static/images/tx/1-14122G11131.jpg" class="bsa-media-thumb-img" alt="avatar">
                        </div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">骑着蜗牛看世界</h5>
                            <p class="bsa-media-text">兄弟，晚上一起去喝几杯</p>
                            <p class="bsa-media-time small">40分钟前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb">
                            <img src="static/images/tx/1-14122G11114.jpg" class="bsa-media-thumb-img" alt="avatar">
                        </div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">小刘</h5>
                            <p class="bsa-media-text">订单已经发货完毕</p>
                            <p class="bsa-media-time small">7天前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb">
                            <img src="static/images/tx/1-14122G11126-50.jpg" class="bsa-media-thumb-img" alt="avatar">
                        </div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">小王</h5>
                            <p class="bsa-media-text">晚上一起去公园走走呀~</p>
                            <p class="bsa-media-time small">8天前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb">
                            <img src="static/images/tx/1-14122G11112-50.jpg" class="bsa-media-thumb-img" alt="avatar">
                        </div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">人生如茶</h5>
                            <p class="bsa-media-text">今天晚上大家留下来开个产品会议</p>
                            <p class="bsa-media-time small">2周前</p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="bsa-dropdown-menu-footer d-flex align-items-center justify-content-center">
                <a href="javascript:" class="bsa-dropdown-view-all">查看所有消息</a>
            </div>
        </div>
    </div>
    <div class="bsa-header-item dropdown">
        <div class="bsa-user-info" data-bs-toggle="dropdown" role="button">
            <img src="static/images/avatar.jpg" class="bsa-user-img" alt="用户头像">
            <div class="bsa-user-detail">
                <div class="bsa-user-name">欲饮琵琶码上催</div>
                <div class="bsa-user-role">超级管理员</div>
            </div>
        </div>
        <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="javascript:"><i class="bi bi-person"></i>个人资料</a></li>
            <li><a class="dropdown-item" href="javascript:"><i class="bi bi-gear"></i>设置</a></li>
            <li>
                <div class="dropdown-divider"></div>
            </li>
            <li><a class="dropdown-item" href="javascript:"><i class="bi bi-box-arrow-right"></i>退出登录</a></li>
        </ul>
    </div>
</div>


<!--内容区域-->
<div class="bsa-main-wrapper">
    <div class="bsa-main-content">

        <div class="card border-0 shadow-sm">
            <div class="card-body p-4">
                <h5 class="card-title">基础按钮</h5>
                <div class="w-100 border-bottom my-3"></div>
                <div class="row row-cols-1 row-cols-md-1 row-cols-lg-2 row-cols-xl-2 g-3">
                    <div class="col">
                        <div class="bsa-component">
                            <div class="row row-cols-auto g-3">
                                <div class="col">
                                    <button type="button" class="btn btn-primary px-5">Primary</button>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-secondary px-5">Secondary</button>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-success px-5">Success</button>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-danger px-5">Danger</button>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-warning px-5">Warning</button>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-info px-5">Info</button>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-light px-5">Light</button>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-dark px-5">Dark</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="bsa-component">
                            <div class="row row-cols-auto g-3">
                                <div class="col">
                                    <button type="button" class="btn btn-outline-primary px-5">Primary</button>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-outline-secondary px-5">Secondary</button>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-outline-success px-5">Success</button>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-outline-danger px-5">Danger</button>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-outline-warning px-5">Warning</button>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-outline-info px-5">Info</button>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-light px-5">Light</button>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-outline-dark px-5">Dark</button>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <h5 class="card-title mt-5">圆角按钮</h5>
                <div class="w-100 border-bottom my-3"></div>
                <div class="row row-cols-1 row-cols-md-1 row-cols-lg-2 row-cols-xl-2 g-3">
                    <div class="col">
                        <div class="bsa-component">
                            <div class="row row-cols-auto g-3">
                                <div class="col">
                                    <button type="button" class="btn btn-primary px-5 bsa-radius-30">Primary</button>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-secondary px-5 bsa-radius-30">Secondary
                                    </button>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-success px-5 bsa-radius-30">Success</button>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-danger px-5 bsa-radius-30">Danger</button>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-warning px-5 bsa-radius-30">Warning</button>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-info px-5 bsa-radius-30">Info</button>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-light px-5 bsa-radius-30">Light</button>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-dark px-5 bsa-radius-30">Dark</button>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col">
                        <div class="bsa-component">
                            <div class="row row-cols-auto g-3">
                                <div class="col">
                                    <button type="button" class="btn btn-outline-primary px-5 bsa-radius-30">Primary
                                    </button>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-outline-secondary px-5 bsa-radius-30">Secondary
                                    </button>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-outline-success px-5 bsa-radius-30">Success
                                    </button>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-outline-danger px-5 bsa-radius-30">Danger
                                    </button>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-outline-warning px-5 bsa-radius-30">Warning
                                    </button>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-outline-info px-5 bsa-radius-30">Info</button>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-light px-5 bsa-radius-30">Light</button>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-outline-dark px-5 bsa-radius-30">Dark</button>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <h5 class="card-title mt-5">带图标的按钮</h5>
                <div class="w-100 border-bottom my-3"></div>
                <div class="row row-cols-1 row-cols-md-1 row-cols-lg-2 row-cols-xl-2 g-3">
                    <div class="col">
                        <div class="row row-cols-1 gy-4">
                            <div class="col">
                                <div class="bsa-component">

                                    <div class="row row-cols-auto g-3">
                                        <div class="col">
                                            <button type="button" class="btn btn-primary px-5"><i
                                                    class="bi bi-person me-1"></i>Person
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-secondary px-5"><i
                                                    class='bi bi-chat-left-text me-1'></i>Comments
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-success px-5"><i
                                                    class='bi bi-house me-1'></i>Home
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-danger px-5"><i
                                                    class='bi bi-bookmark me-1'></i>Bookmark
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-warning px-5"><i
                                                    class='bi bi-heart me-1'></i>Love
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-info px-5"><i
                                                    class='bi bi-cloud-arrow-down me-1'></i>Downloads
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-dark px-5"><i
                                                    class='bi bi-cloud-arrow-up me-1'></i>Upload
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col">
                                <div class="bsa-component">

                                    <div class="row row-cols-auto g-3">
                                        <div class="col">
                                            <button type="button" class="btn btn-primary px-5 bsa-radius-30"><i
                                                    class='bi bi-person me-1'></i>Person
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-secondary px-5 bsa-radius-30"><i
                                                    class='bi bi-chat-left-text me-1'></i>Comments
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-success px-5 bsa-radius-30"><i
                                                    class='bi bi-house me-1'></i>Home
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-danger px-5 bsa-radius-30"><i
                                                    class='bi bi-bookmark me-1'></i>Bookmark
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-warning px-5 bsa-radius-30"><i
                                                    class='bi bi-heart me-1'></i>Love
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-info px-5 bsa-radius-30"><i
                                                    class='bi bi-cloud-arrow-down me-1'></i>Downloads
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-dark px-5 bsa-radius-30"><i
                                                    class='bi bi-cloud-arrow-up me-1'></i>Upload
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col">
                                <div class="bsa-component">
                                    <div class="row row-cols-auto g-3">
                                        <div class="col">
                                            <button type="button" class="btn btn-primary"><i
                                                    class='bi bi-person me-0'></i>
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-secondary"><i
                                                    class='bi bi-grid me-0'></i>
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-success"><i
                                                    class='bi bi-geo-alt me-0'></i>
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-danger"><i
                                                    class='bi bi-arrows-fullscreen me-0'></i>
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-warning"><i
                                                    class='bi bi-chat-left me-0'></i>
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-info"><i
                                                    class='bi bi-arrow-clockwise me-0'></i>
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-dark"><i class='bi bi-star me-0'></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                    <div class="col">
                        <div class="row row-cols-1 gy-4">
                            <div class="col">
                                <div class="bsa-component">

                                    <div class="row row-cols-auto g-3">
                                        <div class="col">
                                            <button type="button" class="btn btn-outline-primary px-5"><i
                                                    class="bi bi-person me-1"></i>Person
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-outline-secondary px-5"><i
                                                    class='bi bi-chat-left-text me-1'></i>Comments
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-outline-success px-5"><i
                                                    class='bi bi-house me-1'></i>Home
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-outline-danger px-5"><i
                                                    class='bi bi-bookmark me-1'></i>Bookmark
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-outline-warning px-5"><i
                                                    class='bi bi-heart me-1'></i>Love
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-outline-info px-5"><i
                                                    class='bi bi-cloud-arrow-down me-1'></i>Downloads
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-outline-dark px-5"><i
                                                    class='bi bi-cloud-arrow-up me-1'></i>Upload
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col">
                                <div class="bsa-component">

                                    <div class="row row-cols-auto g-3">
                                        <div class="col">
                                            <button type="button" class="btn btn-outline-primary px-5 bsa-radius-30"><i
                                                    class='bi bi-person me-1'></i>Person
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-outline-secondary px-5 bsa-radius-30">
                                                <i
                                                        class='bi bi-chat-left-text me-1'></i>Comments
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-outline-success px-5 bsa-radius-30"><i
                                                    class='bi bi-house me-1'></i>Home
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-outline-danger px-5 bsa-radius-30"><i
                                                    class='bi bi-bookmark me-1'></i>Bookmark
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-outline-warning px-5 bsa-radius-30"><i
                                                    class='bi bi-heart me-1'></i>Love
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-outline-info px-5 bsa-radius-30"><i
                                                    class='bi bi-cloud-arrow-down me-1'></i>Downloads
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-outline-dark px-5 bsa-radius-30"><i
                                                    class='bi bi-cloud-arrow-up me-1'></i>Upload
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col">
                                <div class="bsa-component">
                                    <div class="row row-cols-auto g-3">
                                        <div class="col">
                                            <button type="button" class="btn btn-outline-primary"><i
                                                    class='bi bi-person me-0'></i>
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-outline-secondary"><i
                                                    class='bi bi-grid me-0'></i>
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-outline-success"><i
                                                    class='bi bi-geo-alt me-0'></i>
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-outline-danger"><i
                                                    class='bi bi-arrows-fullscreen me-0'></i>
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-outline-warning"><i
                                                    class='bi bi-chat-left me-0'></i>
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-outline-info"><i
                                                    class='bi bi-arrow-clockwise me-0'></i>
                                            </button>
                                        </div>
                                        <div class="col">
                                            <button type="button" class="btn btn-outline-dark"><i
                                                    class='bi bi-star me-0'></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>

                <h5 class="card-title mt-5">按钮组</h5>
                <div class="w-100 border-bottom my-3"></div>
                <div class="row row-cols-1 row-cols-md-1 row-cols-lg-2 row-cols-xl-2 g-3">
                    <div class="col">
                        <div class="row row-cols-1 g-3">
                            <div class="col">
                                <div class="bsa-component">
                                    <div class="row row-cols-auto g-3">
                                        <div class="col">
                                            <div class="btn-group" role="group" aria-label="First group">
                                                <button type="button" class="btn btn-primary">1</button>
                                                <button type="button" class="btn btn-primary">2</button>
                                                <button type="button" class="btn btn-primary">3</button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group" role="group" aria-label="First group">
                                                <button type="button" class="btn btn-secondary">1</button>
                                                <button type="button" class="btn btn-secondary">2</button>
                                                <button type="button" class="btn btn-secondary">3</button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group" role="group" aria-label="First group">
                                                <button type="button" class="btn btn-success">1</button>
                                                <button type="button" class="btn btn-success">2</button>
                                                <button type="button" class="btn btn-success">3</button>
                                            </div>
                                        </div>

                                        <div class="col">
                                            <div class="btn-group" role="group" aria-label="First group">
                                                <button type="button" class="btn btn-danger">1</button>
                                                <button type="button" class="btn btn-danger">2</button>
                                                <button type="button" class="btn btn-danger">3</button>
                                            </div>
                                        </div>

                                        <div class="col">
                                            <div class="btn-group" role="group" aria-label="First group">
                                                <button type="button" class="btn btn-warning">1</button>
                                                <button type="button" class="btn btn-warning">2</button>
                                                <button type="button" class="btn btn-warning">3</button>
                                            </div>
                                        </div>

                                        <div class="col">
                                            <div class="btn-group" role="group" aria-label="First group">
                                                <button type="button" class="btn btn-info">1</button>
                                                <button type="button" class="btn btn-info">2</button>
                                                <button type="button" class="btn btn-info">3</button>
                                            </div>
                                        </div>

                                        <div class="col">
                                            <div class="btn-group" role="group" aria-label="First group">
                                                <button type="button" class="btn btn-dark">1</button>
                                                <button type="button" class="btn btn-dark">2</button>
                                                <button type="button" class="btn btn-dark">3</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="bsa-component">
                                    <div class="row row-cols-auto g-3">
                                        <div class="col">
                                            <div class="btn-group" role="group"
                                                 aria-label="Button group with nested dropdown">
                                                <button type="button" class="btn btn-primary">1</button>
                                                <button type="button" class="btn btn-primary">2</button>
                                                <div class="btn-group" role="group">
                                                    <button type="button" class="btn btn-primary dropdown-toggle"
                                                            data-bs-toggle="dropdown" aria-expanded="false">Dropdown
                                                    </button>
                                                    <ul class="dropdown-menu" style="">
                                                        <li><a class="dropdown-item" href="javascript:">Dropdown
                                                            link</a>
                                                        </li>
                                                        <li><a class="dropdown-item" href="javascript:">Dropdown
                                                            link</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="col">
                                            <div class="btn-group" role="group"
                                                 aria-label="Button group with nested dropdown">
                                                <button type="button" class="btn btn-secondary">1</button>
                                                <button type="button" class="btn btn-secondary">2</button>
                                                <div class="btn-group" role="group">
                                                    <button type="button" class="btn btn-secondary dropdown-toggle"
                                                            data-bs-toggle="dropdown" aria-expanded="false">Dropdown
                                                    </button>
                                                    <ul class="dropdown-menu" style="">
                                                        <li><a class="dropdown-item" href="javascript:">Dropdown
                                                            link</a>
                                                        </li>
                                                        <li><a class="dropdown-item" href="javascript:">Dropdown
                                                            link</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="col">
                                            <div class="btn-group" role="group"
                                                 aria-label="Button group with nested dropdown">
                                                <button type="button" class="btn btn-success">1</button>
                                                <button type="button" class="btn btn-success">2</button>
                                                <div class="btn-group" role="group">
                                                    <button type="button" class="btn btn-success dropdown-toggle"
                                                            data-bs-toggle="dropdown" aria-expanded="false">Dropdown
                                                    </button>
                                                    <ul class="dropdown-menu" style="">
                                                        <li><a class="dropdown-item" href="javascript:">Dropdown
                                                            link</a>
                                                        </li>
                                                        <li><a class="dropdown-item" href="javascript:">Dropdown
                                                            link</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="col">
                                            <div class="btn-group" role="group"
                                                 aria-label="Button group with nested dropdown">
                                                <button type="button" class="btn btn-danger">1</button>
                                                <button type="button" class="btn btn-danger">2</button>
                                                <div class="btn-group" role="group">
                                                    <button type="button" class="btn btn-danger dropdown-toggle"
                                                            data-bs-toggle="dropdown" aria-expanded="false">Dropdown
                                                    </button>
                                                    <ul class="dropdown-menu" style="">
                                                        <li><a class="dropdown-item" href="javascript:">Dropdown
                                                            link</a>
                                                        </li>
                                                        <li><a class="dropdown-item" href="javascript:">Dropdown
                                                            link</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="col">
                                            <div class="btn-group" role="group"
                                                 aria-label="Button group with nested dropdown">
                                                <button type="button" class="btn btn-warning">1</button>
                                                <button type="button" class="btn btn-warning">2</button>
                                                <div class="btn-group" role="group">
                                                    <button type="button" class="btn btn-warning dropdown-toggle"
                                                            data-bs-toggle="dropdown" aria-expanded="false">Dropdown
                                                    </button>
                                                    <ul class="dropdown-menu" style="">
                                                        <li><a class="dropdown-item" href="javascript:">Dropdown
                                                            link</a>
                                                        </li>
                                                        <li><a class="dropdown-item" href="javascript:">Dropdown
                                                            link</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="col">
                                            <div class="btn-group" role="group"
                                                 aria-label="Button group with nested dropdown">
                                                <button type="button" class="btn btn-info">1</button>
                                                <button type="button" class="btn btn-info">2</button>
                                                <div class="btn-group" role="group">
                                                    <button type="button" class="btn btn-info dropdown-toggle"
                                                            data-bs-toggle="dropdown" aria-expanded="false">Dropdown
                                                    </button>
                                                    <ul class="dropdown-menu" style="">
                                                        <li><a class="dropdown-item" href="javascript:">Dropdown
                                                            link</a>
                                                        </li>
                                                        <li><a class="dropdown-item" href="javascript:">Dropdown
                                                            link</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="col">
                                            <div class="btn-group" role="group"
                                                 aria-label="Button group with nested dropdown">
                                                <button type="button" class="btn btn-dark">1</button>
                                                <button type="button" class="btn btn-dark">2</button>
                                                <div class="btn-group" role="group">
                                                    <button type="button" class="btn btn-dark dropdown-toggle"
                                                            data-bs-toggle="dropdown" aria-expanded="false">Dropdown
                                                    </button>
                                                    <ul class="dropdown-menu" style="">
                                                        <li><a class="dropdown-item" href="javascript:">Dropdown
                                                            link</a>
                                                        </li>
                                                        <li><a class="dropdown-item" href="javascript:">Dropdown
                                                            link</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="bsa-component">
                                    <div class="row row-cols-auto g-3">
                                        <div class="col">
                                            <div class="btn-group" role="group" aria-label="Basic example">
                                                <button type="button" class="btn btn-primary"><i
                                                        class="bi bi-hand-thumbs-up"></i>
                                                </button>
                                                <button type="button" class="btn btn-primary"><i class="bi bi-star"></i>
                                                </button>
                                                <button type="button" class="btn btn-primary"><i
                                                        class="bi bi-heart"></i></button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group" role="group" aria-label="Basic example">
                                                <button type="button" class="btn btn-secondary"><i
                                                        class="bi bi-hand-thumbs-up"></i>
                                                </button>
                                                <button type="button" class="btn btn-secondary"><i
                                                        class="bi bi-star"></i></button>
                                                <button type="button" class="btn btn-secondary"><i
                                                        class="bi bi-heart"></i></button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group" role="group" aria-label="Basic example">
                                                <button type="button" class="btn btn-success"><i
                                                        class="bi bi-hand-thumbs-up"></i>
                                                </button>
                                                <button type="button" class="btn btn-success"><i class="bi bi-star"></i>
                                                </button>
                                                <button type="button" class="btn btn-success"><i
                                                        class="bi bi-heart"></i></button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group" role="group" aria-label="Basic example">
                                                <button type="button" class="btn btn-danger"><i
                                                        class="bi bi-hand-thumbs-up"></i>
                                                </button>
                                                <button type="button" class="btn btn-danger"><i class="bi bi-star"></i>
                                                </button>
                                                <button type="button" class="btn btn-danger"><i class="bi bi-heart"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group" role="group" aria-label="Basic example">
                                                <button type="button" class="btn btn-warning"><i
                                                        class="bi bi-hand-thumbs-up"></i>
                                                </button>
                                                <button type="button" class="btn btn-warning"><i class="bi bi-star"></i>
                                                </button>
                                                <button type="button" class="btn btn-warning"><i
                                                        class="bi bi-heart"></i></button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group" role="group" aria-label="Basic example">
                                                <button type="button" class="btn btn-info"><i
                                                        class="bi bi-hand-thumbs-up"></i>
                                                </button>
                                                <button type="button" class="btn btn-info"><i class="bi bi-star"></i>
                                                </button>
                                                <button type="button" class="btn btn-info"><i class="bi bi-heart"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group" role="group" aria-label="Basic example">
                                                <button type="button" class="btn btn-dark"><i
                                                        class="bi bi-hand-thumbs-up"></i>
                                                </button>
                                                <button type="button" class="btn btn-dark"><i class="bi bi-star"></i>
                                                </button>
                                                <button type="button" class="btn btn-dark"><i class="bi bi-heart"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col">
                                <div class="bsa-component">
                                    <div class="row row-cols-auto g-3">
                                        <div class="col">
                                            <div class="btn-group-vertical" role="group"
                                                 aria-label="Vertical button group">
                                                <button type="button" class="btn btn-primary">Button</button>
                                                <button type="button" class="btn btn-primary">Button</button>
                                                <button type="button" class="btn btn-primary">Button</button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group-vertical" role="group"
                                                 aria-label="Vertical button group">
                                                <button type="button" class="btn btn-secondary">Button</button>
                                                <button type="button" class="btn btn-secondary">Button</button>
                                                <button type="button" class="btn btn-secondary">Button</button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group-vertical" role="group"
                                                 aria-label="Vertical button group">
                                                <button type="button" class="btn btn-success">Button</button>
                                                <button type="button" class="btn btn-success">Button</button>
                                                <button type="button" class="btn btn-success">Button</button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group-vertical" role="group"
                                                 aria-label="Vertical button group">
                                                <button type="button" class="btn btn-danger">Button</button>
                                                <button type="button" class="btn btn-danger">Button</button>
                                                <button type="button" class="btn btn-danger">Button</button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group-vertical" role="group"
                                                 aria-label="Vertical button group">
                                                <button type="button" class="btn btn-warning">Button</button>
                                                <button type="button" class="btn btn-warning">Button</button>
                                                <button type="button" class="btn btn-warning">Button</button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group-vertical" role="group"
                                                 aria-label="Vertical button group">
                                                <button type="button" class="btn btn-info">Button</button>
                                                <button type="button" class="btn btn-info">Button</button>
                                                <button type="button" class="btn btn-info">Button</button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group-vertical" role="group"
                                                 aria-label="Vertical button group">
                                                <button type="button" class="btn btn-dark">Button</button>
                                                <button type="button" class="btn btn-dark">Button</button>
                                                <button type="button" class="btn btn-dark">Button</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col">
                                <div class="bsa-component">
                                    <div class="row row-cols-auto g-3">
                                        <div class="col">
                                            <div class="btn-group-vertical" role="group"
                                                 aria-label="Vertical button group">
                                                <button type="button" class="btn btn-primary"><i
                                                        class="bi bi-heart"></i>
                                                </button>
                                                <button type="button" class="btn btn-primary"><i
                                                        class="bi bi-browser-edge"></i>
                                                </button>
                                                <button type="button" class="btn btn-primary"><i
                                                        class="bi bi-browser-safari"></i>
                                                </button>
                                                <button type="button" class="btn btn-primary"><i
                                                        class="bi bi-camera-reels"></i>
                                                </button>
                                                <button type="button" class="btn btn-primary"><i
                                                        class="bi bi-card-image"></i>
                                                </button>
                                                <button type="button" class="btn btn-primary"><i class="bi bi-cart"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group-vertical" role="group"
                                                 aria-label="Vertical button group">
                                                <button type="button" class="btn btn-secondary"><i
                                                        class="bi bi-heart"></i>
                                                </button>
                                                <button type="button" class="btn btn-secondary"><i
                                                        class="bi bi-browser-edge"></i>
                                                </button>
                                                <button type="button" class="btn btn-secondary"><i
                                                        class="bi bi-browser-safari"></i>
                                                </button>
                                                <button type="button" class="btn btn-secondary"><i
                                                        class="bi bi-camera-reels"></i>
                                                </button>
                                                <button type="button" class="btn btn-secondary"><i
                                                        class="bi bi-card-image"></i>
                                                </button>
                                                <button type="button" class="btn btn-secondary"><i
                                                        class="bi bi-cart"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group-vertical" role="group"
                                                 aria-label="Vertical button group">
                                                <button type="button" class="btn btn-success"><i
                                                        class="bi bi-heart"></i>
                                                </button>
                                                <button type="button" class="btn btn-success"><i
                                                        class="bi bi-browser-edge"></i>
                                                </button>
                                                <button type="button" class="btn btn-success"><i
                                                        class="bi bi-browser-safari"></i>
                                                </button>
                                                <button type="button" class="btn btn-success"><i
                                                        class="bi bi-camera-reels"></i>
                                                </button>
                                                <button type="button" class="btn btn-success"><i
                                                        class="bi bi-card-image"></i>
                                                </button>
                                                <button type="button" class="btn btn-success"><i class="bi bi-cart"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group-vertical" role="group"
                                                 aria-label="Vertical button group">
                                                <button type="button" class="btn btn-danger"><i class="bi bi-heart"></i>
                                                </button>
                                                <button type="button" class="btn btn-danger"><i
                                                        class="bi bi-browser-edge"></i>
                                                </button>
                                                <button type="button" class="btn btn-danger"><i
                                                        class="bi bi-browser-safari"></i>
                                                </button>
                                                <button type="button" class="btn btn-danger"><i
                                                        class="bi bi-camera-reels"></i>
                                                </button>
                                                <button type="button" class="btn btn-danger"><i
                                                        class="bi bi-card-image"></i>
                                                </button>
                                                <button type="button" class="btn btn-danger"><i class="bi bi-cart"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group-vertical" role="group"
                                                 aria-label="Vertical button group">
                                                <button type="button" class="btn btn-warning"><i
                                                        class="bi bi-heart"></i>
                                                </button>
                                                <button type="button" class="btn btn-warning"><i
                                                        class="bi bi-browser-edge"></i>
                                                </button>
                                                <button type="button" class="btn btn-warning"><i
                                                        class="bi bi-browser-safari"></i>
                                                </button>
                                                <button type="button" class="btn btn-warning"><i
                                                        class="bi bi-camera-reels"></i>
                                                </button>
                                                <button type="button" class="btn btn-warning"><i
                                                        class="bi bi-card-image"></i>
                                                </button>
                                                <button type="button" class="btn btn-warning"><i class="bi bi-cart"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group-vertical" role="group"
                                                 aria-label="Vertical button group">
                                                <button type="button" class="btn btn-info"><i class="bi bi-heart"></i>
                                                </button>
                                                <button type="button" class="btn btn-info"><i
                                                        class="bi bi-browser-edge"></i>
                                                </button>
                                                <button type="button" class="btn btn-info"><i
                                                        class="bi bi-browser-safari"></i>
                                                </button>
                                                <button type="button" class="btn btn-info"><i
                                                        class="bi bi-camera-reels"></i>
                                                </button>
                                                <button type="button" class="btn btn-info"><i
                                                        class="bi bi-card-image"></i>
                                                </button>
                                                <button type="button" class="btn btn-info"><i class="bi bi-cart"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group-vertical" role="group"
                                                 aria-label="Vertical button group">
                                                <button type="button" class="btn btn-dark"><i class="bi bi-heart"></i>
                                                </button>
                                                <button type="button" class="btn btn-dark"><i
                                                        class="bi bi-browser-edge"></i>
                                                </button>
                                                <button type="button" class="btn btn-dark"><i
                                                        class="bi bi-browser-safari"></i>
                                                </button>
                                                <button type="button" class="btn btn-dark"><i
                                                        class="bi bi-camera-reels"></i>
                                                </button>
                                                <button type="button" class="btn btn-dark"><i
                                                        class="bi bi-card-image"></i>
                                                </button>
                                                <button type="button" class="btn btn-dark"><i class="bi bi-cart"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="row row-cols-1 g-3">
                            <div class="col">
                                <div class="bsa-component">
                                    <div class="row row-cols-auto g-3">
                                        <div class="col">
                                            <div class="btn-group" role="group" aria-label="First group">
                                                <button type="button" class="btn btn-outline-primary">1</button>
                                                <button type="button" class="btn btn-outline-primary">2</button>
                                                <button type="button" class="btn btn-outline-primary">3</button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group" role="group" aria-label="First group">
                                                <button type="button" class="btn btn-outline-secondary">1</button>
                                                <button type="button" class="btn btn-outline-secondary">2</button>
                                                <button type="button" class="btn btn-outline-secondary">3</button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group" role="group" aria-label="First group">
                                                <button type="button" class="btn btn-outline-success">1</button>
                                                <button type="button" class="btn btn-outline-success">2</button>
                                                <button type="button" class="btn btn-outline-success">3</button>
                                            </div>
                                        </div>

                                        <div class="col">
                                            <div class="btn-group" role="group" aria-label="First group">
                                                <button type="button" class="btn btn-outline-danger">1</button>
                                                <button type="button" class="btn btn-outline-danger">2</button>
                                                <button type="button" class="btn btn-outline-danger">3</button>
                                            </div>
                                        </div>

                                        <div class="col">
                                            <div class="btn-group" role="group" aria-label="First group">
                                                <button type="button" class="btn btn-outline-warning">1</button>
                                                <button type="button" class="btn btn-outline-warning">2</button>
                                                <button type="button" class="btn btn-outline-warning">3</button>
                                            </div>
                                        </div>

                                        <div class="col">
                                            <div class="btn-group" role="group" aria-label="First group">
                                                <button type="button" class="btn btn-outline-info">1</button>
                                                <button type="button" class="btn btn-outline-info">2</button>
                                                <button type="button" class="btn btn-outline-info">3</button>
                                            </div>
                                        </div>

                                        <div class="col">
                                            <div class="btn-group" role="group" aria-label="First group">
                                                <button type="button" class="btn btn-outline-dark">1</button>
                                                <button type="button" class="btn btn-outline-dark">2</button>
                                                <button type="button" class="btn btn-outline-dark">3</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="bsa-component">
                                    <div class="row row-cols-auto g-3">
                                        <div class="col">
                                            <div class="btn-group" role="group"
                                                 aria-label="Button group with nested dropdown">
                                                <button type="button" class="btn btn-outline-primary">1</button>
                                                <button type="button" class="btn btn-outline-primary">2</button>
                                                <div class="btn-group" role="group">
                                                    <button type="button"
                                                            class="btn btn-outline-primary dropdown-toggle"
                                                            data-bs-toggle="dropdown" aria-expanded="false">Dropdown
                                                    </button>
                                                    <ul class="dropdown-menu" style="">
                                                        <li><a class="dropdown-item" href="javascript:">Dropdown
                                                            link</a>
                                                        </li>
                                                        <li><a class="dropdown-item" href="javascript:">Dropdown
                                                            link</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="col">
                                            <div class="btn-group" role="group"
                                                 aria-label="Button group with nested dropdown">
                                                <button type="button" class="btn btn-outline-secondary">1</button>
                                                <button type="button" class="btn btn-outline-secondary">2</button>
                                                <div class="btn-group" role="group">
                                                    <button type="button"
                                                            class="btn btn-outline-secondary dropdown-toggle"
                                                            data-bs-toggle="dropdown" aria-expanded="false">Dropdown
                                                    </button>
                                                    <ul class="dropdown-menu" style="">
                                                        <li><a class="dropdown-item" href="javascript:">Dropdown
                                                            link</a>
                                                        </li>
                                                        <li><a class="dropdown-item" href="javascript:">Dropdown
                                                            link</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="col">
                                            <div class="btn-group" role="group"
                                                 aria-label="Button group with nested dropdown">
                                                <button type="button" class="btn btn-outline-success">1</button>
                                                <button type="button" class="btn btn-outline-success">2</button>
                                                <div class="btn-group" role="group">
                                                    <button type="button"
                                                            class="btn btn-outline-success dropdown-toggle"
                                                            data-bs-toggle="dropdown" aria-expanded="false">Dropdown
                                                    </button>
                                                    <ul class="dropdown-menu" style="">
                                                        <li><a class="dropdown-item" href="javascript:">Dropdown
                                                            link</a>
                                                        </li>
                                                        <li><a class="dropdown-item" href="javascript:">Dropdown
                                                            link</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="col">
                                            <div class="btn-group" role="group"
                                                 aria-label="Button group with nested dropdown">
                                                <button type="button" class="btn btn-outline-danger">1</button>
                                                <button type="button" class="btn btn-outline-danger">2</button>
                                                <div class="btn-group" role="group">
                                                    <button type="button" class="btn btn-outline-danger dropdown-toggle"
                                                            data-bs-toggle="dropdown" aria-expanded="false">Dropdown
                                                    </button>
                                                    <ul class="dropdown-menu" style="">
                                                        <li><a class="dropdown-item" href="javascript:">Dropdown
                                                            link</a>
                                                        </li>
                                                        <li><a class="dropdown-item" href="javascript:">Dropdown
                                                            link</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="col">
                                            <div class="btn-group" role="group"
                                                 aria-label="Button group with nested dropdown">
                                                <button type="button" class="btn btn-outline-warning">1</button>
                                                <button type="button" class="btn btn-outline-warning">2</button>
                                                <div class="btn-group" role="group">
                                                    <button type="button"
                                                            class="btn btn-outline-warning dropdown-toggle"
                                                            data-bs-toggle="dropdown" aria-expanded="false">Dropdown
                                                    </button>
                                                    <ul class="dropdown-menu" style="">
                                                        <li><a class="dropdown-item" href="javascript:">Dropdown
                                                            link</a>
                                                        </li>
                                                        <li><a class="dropdown-item" href="javascript:">Dropdown
                                                            link</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="col">
                                            <div class="btn-group" role="group"
                                                 aria-label="Button group with nested dropdown">
                                                <button type="button" class="btn btn-outline-info">1</button>
                                                <button type="button" class="btn btn-outline-info">2</button>
                                                <div class="btn-group" role="group">
                                                    <button type="button" class="btn btn-outline-info dropdown-toggle"
                                                            data-bs-toggle="dropdown" aria-expanded="false">Dropdown
                                                    </button>
                                                    <ul class="dropdown-menu" style="">
                                                        <li><a class="dropdown-item" href="javascript:">Dropdown
                                                            link</a>
                                                        </li>
                                                        <li><a class="dropdown-item" href="javascript:">Dropdown
                                                            link</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="col">
                                            <div class="btn-group" role="group"
                                                 aria-label="Button group with nested dropdown">
                                                <button type="button" class="btn btn-outline-dark">1</button>
                                                <button type="button" class="btn btn-outline-dark">2</button>
                                                <div class="btn-group" role="group">
                                                    <button type="button" class="btn btn-outline-dark dropdown-toggle"
                                                            data-bs-toggle="dropdown" aria-expanded="false">Dropdown
                                                    </button>
                                                    <ul class="dropdown-menu" style="">
                                                        <li><a class="dropdown-item" href="javascript:">Dropdown
                                                            link</a>
                                                        </li>
                                                        <li><a class="dropdown-item" href="javascript:">Dropdown
                                                            link</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="bsa-component">
                                    <div class="row row-cols-auto g-3">
                                        <div class="col">
                                            <div class="btn-group" role="group" aria-label="Basic example">
                                                <button type="button" class="btn btn-outline-primary"><i
                                                        class="bi bi-hand-thumbs-up"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-primary"><i
                                                        class="bi bi-star"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-primary"><i
                                                        class="bi bi-heart"></i></button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group" role="group" aria-label="Basic example">
                                                <button type="button" class="btn btn-outline-secondary"><i
                                                        class="bi bi-hand-thumbs-up"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-secondary"><i
                                                        class="bi bi-star"></i></button>
                                                <button type="button" class="btn btn-outline-secondary"><i
                                                        class="bi bi-heart"></i></button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group" role="group" aria-label="Basic example">
                                                <button type="button" class="btn btn-outline-success"><i
                                                        class="bi bi-hand-thumbs-up"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-success"><i
                                                        class="bi bi-star"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-success"><i
                                                        class="bi bi-heart"></i></button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group" role="group" aria-label="Basic example">
                                                <button type="button" class="btn btn-outline-danger"><i
                                                        class="bi bi-hand-thumbs-up"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-danger"><i
                                                        class="bi bi-star"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-danger"><i
                                                        class="bi bi-heart"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group" role="group" aria-label="Basic example">
                                                <button type="button" class="btn btn-outline-warning"><i
                                                        class="bi bi-hand-thumbs-up"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-warning"><i
                                                        class="bi bi-star"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-warning"><i
                                                        class="bi bi-heart"></i></button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group" role="group" aria-label="Basic example">
                                                <button type="button" class="btn btn-outline-info"><i
                                                        class="bi bi-hand-thumbs-up"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-info"><i
                                                        class="bi bi-star"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-info"><i
                                                        class="bi bi-heart"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group" role="group" aria-label="Basic example">
                                                <button type="button" class="btn btn-outline-dark"><i
                                                        class="bi bi-hand-thumbs-up"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-dark"><i
                                                        class="bi bi-star"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-dark"><i
                                                        class="bi bi-heart"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col">
                                <div class="bsa-component">
                                    <div class="row row-cols-auto g-3">
                                        <div class="col">
                                            <div class="btn-group-vertical" role="group"
                                                 aria-label="Vertical button group">
                                                <button type="button" class="btn btn-outline-primary">Button</button>
                                                <button type="button" class="btn btn-outline-primary">Button</button>
                                                <button type="button" class="btn btn-outline-primary">Button</button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group-vertical" role="group"
                                                 aria-label="Vertical button group">
                                                <button type="button" class="btn btn-outline-secondary">Button</button>
                                                <button type="button" class="btn btn-outline-secondary">Button</button>
                                                <button type="button" class="btn btn-outline-secondary">Button</button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group-vertical" role="group"
                                                 aria-label="Vertical button group">
                                                <button type="button" class="btn btn-outline-success">Button</button>
                                                <button type="button" class="btn btn-outline-success">Button</button>
                                                <button type="button" class="btn btn-outline-success">Button</button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group-vertical" role="group"
                                                 aria-label="Vertical button group">
                                                <button type="button" class="btn btn-outline-danger">Button</button>
                                                <button type="button" class="btn btn-outline-danger">Button</button>
                                                <button type="button" class="btn btn-outline-danger">Button</button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group-vertical" role="group"
                                                 aria-label="Vertical button group">
                                                <button type="button" class="btn btn-outline-warning">Button</button>
                                                <button type="button" class="btn btn-outline-warning">Button</button>
                                                <button type="button" class="btn btn-outline-warning">Button</button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group-vertical" role="group"
                                                 aria-label="Vertical button group">
                                                <button type="button" class="btn btn-outline-info">Button</button>
                                                <button type="button" class="btn btn-outline-info">Button</button>
                                                <button type="button" class="btn btn-outline-info">Button</button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group-vertical" role="group"
                                                 aria-label="Vertical button group">
                                                <button type="button" class="btn btn-outline-dark">Button</button>
                                                <button type="button" class="btn btn-outline-dark">Button</button>
                                                <button type="button" class="btn btn-outline-dark">Button</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col">
                                <div class="bsa-component">
                                    <div class="row row-cols-auto g-3">
                                        <div class="col">
                                            <div class="btn-group-vertical" role="group"
                                                 aria-label="Vertical button group">
                                                <button type="button" class="btn btn-outline-primary"><i
                                                        class="bi bi-heart"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-primary"><i
                                                        class="bi bi-browser-edge"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-primary"><i
                                                        class="bi bi-browser-safari"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-primary"><i
                                                        class="bi bi-camera-reels"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-primary"><i
                                                        class="bi bi-card-image"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-primary"><i
                                                        class="bi bi-cart"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group-vertical" role="group"
                                                 aria-label="Vertical button group">
                                                <button type="button" class="btn btn-outline-secondary"><i
                                                        class="bi bi-heart"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-secondary"><i
                                                        class="bi bi-browser-edge"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-secondary"><i
                                                        class="bi bi-browser-safari"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-secondary"><i
                                                        class="bi bi-camera-reels"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-secondary"><i
                                                        class="bi bi-card-image"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-secondary"><i
                                                        class="bi bi-cart"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group-vertical" role="group"
                                                 aria-label="Vertical button group">
                                                <button type="button" class="btn btn-outline-success"><i
                                                        class="bi bi-heart"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-success"><i
                                                        class="bi bi-browser-edge"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-success"><i
                                                        class="bi bi-browser-safari"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-success"><i
                                                        class="bi bi-camera-reels"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-success"><i
                                                        class="bi bi-card-image"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-success"><i
                                                        class="bi bi-cart"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group-vertical" role="group"
                                                 aria-label="Vertical button group">
                                                <button type="button" class="btn btn-outline-danger"><i
                                                        class="bi bi-heart"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-danger"><i
                                                        class="bi bi-browser-edge"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-danger"><i
                                                        class="bi bi-browser-safari"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-danger"><i
                                                        class="bi bi-camera-reels"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-danger"><i
                                                        class="bi bi-card-image"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-danger"><i
                                                        class="bi bi-cart"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group-vertical" role="group"
                                                 aria-label="Vertical button group">
                                                <button type="button" class="btn btn-outline-warning"><i
                                                        class="bi bi-heart"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-warning"><i
                                                        class="bi bi-browser-edge"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-warning"><i
                                                        class="bi bi-browser-safari"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-warning"><i
                                                        class="bi bi-camera-reels"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-warning"><i
                                                        class="bi bi-card-image"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-warning"><i
                                                        class="bi bi-cart"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group-vertical" role="group"
                                                 aria-label="Vertical button group">
                                                <button type="button" class="btn btn-outline-info"><i
                                                        class="bi bi-heart"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-info"><i
                                                        class="bi bi-browser-edge"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-info"><i
                                                        class="bi bi-browser-safari"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-info"><i
                                                        class="bi bi-camera-reels"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-info"><i
                                                        class="bi bi-card-image"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-info"><i
                                                        class="bi bi-cart"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group-vertical" role="group"
                                                 aria-label="Vertical button group">
                                                <button type="button" class="btn btn-outline-dark"><i
                                                        class="bi bi-heart"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-dark"><i
                                                        class="bi bi-browser-edge"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-dark"><i
                                                        class="bi bi-browser-safari"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-dark"><i
                                                        class="bi bi-camera-reels"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-dark"><i
                                                        class="bi bi-card-image"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-dark"><i
                                                        class="bi bi-cart"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <h5 class="card-title mt-5">带有下拉菜单的按钮</h5>
                <div class="w-100 border-bottom my-3"></div>
                <div class="row row-cols-1 row-cols-md-1 row-cols-lg-2 row-cols-xl-2 g-3">
                    <div class="col">
                        <div class="row row-cols-1 g-3">
                            <div class="col">
                                <div class="bsa-component">
                                    <div class="row row-cols-auto g-3">
                                        <div class="col">
                                            <div class="dropdown">
                                                <button class="btn btn-primary dropdown-toggle" type="button"
                                                        data-bs-toggle="dropdown" aria-expanded="false">Primary
                                                </button>
                                                <ul class="dropdown-menu" style="">
                                                    <li><a class="dropdown-item" href="javascript:">Action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Something else
                                                        here</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="dropdown">
                                                <button class="btn btn-secondary dropdown-toggle" type="button"
                                                        data-bs-toggle="dropdown" aria-expanded="false">Secondary
                                                </button>
                                                <ul class="dropdown-menu" style="">
                                                    <li><a class="dropdown-item" href="javascript:">Action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Something else
                                                        here</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="dropdown">
                                                <button class="btn btn-success dropdown-toggle" type="button"
                                                        data-bs-toggle="dropdown" aria-expanded="false">Success
                                                </button>
                                                <ul class="dropdown-menu" style="">
                                                    <li><a class="dropdown-item" href="javascript:">Action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Something else
                                                        here</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="dropdown">
                                                <button class="btn btn-danger dropdown-toggle" type="button"
                                                        data-bs-toggle="dropdown" aria-expanded="false">Info
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="javascript:">Action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Something else
                                                        here</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="dropdown">
                                                <button class="btn btn-warning dropdown-toggle" type="button"
                                                        data-bs-toggle="dropdown" aria-expanded="false">Warning
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="javascript:">Action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Something else
                                                        here</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="dropdown">
                                                <button class="btn btn-info dropdown-toggle" type="button"
                                                        data-bs-toggle="dropdown"
                                                        aria-expanded="false">Danger
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="javascript:">Action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Something else
                                                        here</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="dropdown">
                                                <button class="btn btn-dark dropdown-toggle" type="button"
                                                        data-bs-toggle="dropdown"
                                                        aria-expanded="false">Danger
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="javascript:">Action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Something else
                                                        here</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="bsa-component">
                                    <div class="row row-cols-auto g-3">
                                        <div class="col">
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-primary">Primary</button>
                                                <button type="button"
                                                        class="btn btn-primary split-bg-primary dropdown-toggle dropdown-toggle-split"
                                                        data-bs-toggle="dropdown" aria-expanded="false"><span
                                                        class="visually-hidden">Toggle Dropdown</span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="javascript:">Action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Something else
                                                        here</a>
                                                    </li>
                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Separated link</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-secondary">Secondary</button>
                                                <button type="button"
                                                        class="btn btn-secondary split-bg-secondary dropdown-toggle dropdown-toggle-split"
                                                        data-bs-toggle="dropdown" aria-expanded="false"><span
                                                        class="visually-hidden">Toggle Dropdown</span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="javascript:">Action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Something else
                                                        here</a>
                                                    </li>
                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Separated link</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-success">Success</button>
                                                <button type="button"
                                                        class="btn btn-success split-bg-success dropdown-toggle dropdown-toggle-split"
                                                        data-bs-toggle="dropdown" aria-expanded="false"><span
                                                        class="visually-hidden">Toggle Dropdown</span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="javascript:">Action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Something else
                                                        here</a>
                                                    </li>
                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Separated link</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-danger">Info</button>
                                                <button type="button"
                                                        class="btn btn-danger split-bg-info dropdown-toggle dropdown-toggle-split"
                                                        data-bs-toggle="dropdown" aria-expanded="false"><span
                                                        class="visually-hidden">Toggle Dropdown</span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="javascript:">Action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Something else
                                                        here</a>
                                                    </li>
                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Separated link</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-warning">Warning</button>
                                                <button type="button"
                                                        class="btn btn-warning split-bg-warning dropdown-toggle dropdown-toggle-split"
                                                        data-bs-toggle="dropdown" aria-expanded="false"><span
                                                        class="visually-hidden">Toggle Dropdown</span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="javascript:">Action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Something else
                                                        here</a>
                                                    </li>
                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Separated link</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-info">Danger</button>
                                                <button type="button"
                                                        class="btn btn-info split-bg-danger dropdown-toggle dropdown-toggle-split"
                                                        data-bs-toggle="dropdown" aria-expanded="false"><span
                                                        class="visually-hidden">Toggle Dropdown</span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="javascript:">Action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Something else
                                                        here</a>
                                                    </li>
                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Separated link</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-dark">Danger</button>
                                                <button type="button"
                                                        class="btn btn-dark split-bg-danger dropdown-toggle dropdown-toggle-split"
                                                        data-bs-toggle="dropdown" aria-expanded="false"><span
                                                        class="visually-hidden">Toggle Dropdown</span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="javascript:">Action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Something else
                                                        here</a>
                                                    </li>
                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Separated link</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="col">
                        <div class="row row-cols-1 g-3">
                            <div class="col">
                                <div class="bsa-component">
                                    <div class="row row-cols-auto g-3">
                                        <div class="col">
                                            <div class="dropdown">
                                                <button class="btn btn-outline-primary dropdown-toggle" type="button"
                                                        data-bs-toggle="dropdown" aria-expanded="false">Primary
                                                </button>
                                                <ul class="dropdown-menu" style="">
                                                    <li><a class="dropdown-item" href="javascript:">Action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Something else
                                                        here</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="dropdown">
                                                <button class="btn btn-outline-secondary dropdown-toggle" type="button"
                                                        data-bs-toggle="dropdown" aria-expanded="false">Secondary
                                                </button>
                                                <ul class="dropdown-menu" style="">
                                                    <li><a class="dropdown-item" href="javascript:">Action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Something else
                                                        here</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="dropdown">
                                                <button class="btn btn-outline-success dropdown-toggle" type="button"
                                                        data-bs-toggle="dropdown" aria-expanded="false">Success
                                                </button>
                                                <ul class="dropdown-menu" style="">
                                                    <li><a class="dropdown-item" href="javascript:">Action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Something else
                                                        here</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="dropdown">
                                                <button class="btn btn-outline-danger dropdown-toggle" type="button"
                                                        data-bs-toggle="dropdown" aria-expanded="false">Info
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="javascript:">Action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Something else
                                                        here</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="dropdown">
                                                <button class="btn btn-outline-warning dropdown-toggle" type="button"
                                                        data-bs-toggle="dropdown" aria-expanded="false">Warning
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="javascript:">Action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Something else
                                                        here</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="dropdown">
                                                <button class="btn btn-outline-info dropdown-toggle" type="button"
                                                        data-bs-toggle="dropdown"
                                                        aria-expanded="false">Danger
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="javascript:">Action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Something else
                                                        here</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="dropdown">
                                                <button class="btn btn-outline-dark dropdown-toggle" type="button"
                                                        data-bs-toggle="dropdown"
                                                        aria-expanded="false">Danger
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="javascript:">Action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Something else
                                                        here</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="bsa-component">
                                    <div class="row row-cols-auto g-3">
                                        <div class="col">
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-outline-primary">Primary</button>
                                                <button type="button"
                                                        class="btn btn-outline-primary split-bg-primary dropdown-toggle dropdown-toggle-split"
                                                        data-bs-toggle="dropdown" aria-expanded="false"><span
                                                        class="visually-hidden">Toggle Dropdown</span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="javascript:">Action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Something else
                                                        here</a>
                                                    </li>
                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Separated link</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-outline-secondary">Secondary</button>
                                                <button type="button"
                                                        class="btn btn-outline-secondary split-bg-secondary dropdown-toggle dropdown-toggle-split"
                                                        data-bs-toggle="dropdown" aria-expanded="false"><span
                                                        class="visually-hidden">Toggle Dropdown</span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="javascript:">Action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Something else
                                                        here</a>
                                                    </li>
                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Separated link</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-outline-success">Success</button>
                                                <button type="button"
                                                        class="btn btn-outline-success split-bg-success dropdown-toggle dropdown-toggle-split"
                                                        data-bs-toggle="dropdown" aria-expanded="false"><span
                                                        class="visually-hidden">Toggle Dropdown</span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="javascript:">Action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Something else
                                                        here</a>
                                                    </li>
                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Separated link</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-outline-danger">Info</button>
                                                <button type="button"
                                                        class="btn btn-outline-danger split-bg-info dropdown-toggle dropdown-toggle-split"
                                                        data-bs-toggle="dropdown" aria-expanded="false"><span
                                                        class="visually-hidden">Toggle Dropdown</span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="javascript:">Action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Something else
                                                        here</a>
                                                    </li>
                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Separated link</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-outline-warning">Warning</button>
                                                <button type="button"
                                                        class="btn btn-outline-warning split-bg-warning dropdown-toggle dropdown-toggle-split"
                                                        data-bs-toggle="dropdown" aria-expanded="false"><span
                                                        class="visually-hidden">Toggle Dropdown</span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="javascript:">Action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Something else
                                                        here</a>
                                                    </li>
                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Separated link</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-outline-info">Danger</button>
                                                <button type="button"
                                                        class="btn btn-outline-info split-bg-danger dropdown-toggle dropdown-toggle-split"
                                                        data-bs-toggle="dropdown" aria-expanded="false"><span
                                                        class="visually-hidden">Toggle Dropdown</span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="javascript:">Action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Something else
                                                        here</a>
                                                    </li>
                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Separated link</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-outline-dark">Danger</button>
                                                <button type="button"
                                                        class="btn btn-outline-dark split-bg-danger dropdown-toggle dropdown-toggle-split"
                                                        data-bs-toggle="dropdown" aria-expanded="false"><span
                                                        class="visually-hidden">Toggle Dropdown</span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="javascript:">Action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Another action</a>
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Something else
                                                        here</a>
                                                    </li>
                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                    <li><a class="dropdown-item" href="javascript:">Separated link</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>

            </div>
        </div>

    </div>
</div>

<!--调色板-->
<div class="bsa-switcher">

    <div class="bsa-switcher-toggler-btn">
        <div class="bsa-switcher-toggler-icon">
            <i class="bi bi-gear"></i>
        </div>
    </div>


    <div class="bsa-switcher-header">
        <h5 class="bsa-switcher-header-title">自定义主题</h5>
        <button type="button" class="btn-close text-reset bsa-switcher-toggler-btn"></button>
    </div>


    <div class="bsa-switcher-body">
        <h6 class="text-dark">头部颜色</h6>
        <hr>
        <div class="bsa-headercolor-wrap">

            <div class="row row-cols-auto g-3">
                <div class="col">
                    <div class="headercolor1"></div>
                </div>
                <div class="col">
                    <div class="headercolor2"></div>
                </div>
                <div class="col">
                    <div class="headercolor3"></div>
                </div>
                <div class="col">
                    <div class="headercolor4"></div>
                </div>
                <div class="col">
                    <div class="headercolor5"></div>
                </div>
                <div class="col">
                    <div class="headercolor6"></div>
                </div>
                <div class="col">
                    <div class="headercolor7"></div>
                </div>
                <div class="col">
                    <div class="headercolor8"></div>
                </div>
            </div>
        </div>

        <h6 class="text-dark">侧边栏颜色</h6>
        <hr>
        <div class="bsa-sidebarcolor-wrap">

            <div class="row row-cols-auto g-3">
                <div class="col">
                    <div class="sidebarcolor1"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor2"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor3"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor4"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor5"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor6"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor7"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor8"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="lib/prismjs/prism.js"></script>
<script src="static/js/bootstrap.bundle.min.js"></script>
<script src="src/bootstrap-admin.js"></script>


</body>
</html>